<template>
    <view>
        <view class="page_top" :style="{ 'background': topNav ? 'white' : 'transparent', 'z-index': 199 }">
			<top-status></top-status>
			<view class="tabsBack">
				<view @click="goBack()" class="blackbox">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718776913451430.png"
							mode="widthFix" class="backimg"></image>
					<!-- <uni-icons :color="topNav ? 'black' : 'lightgray'" type="left" size="30"></uni-icons> -->
				</view>
				<view class="topTitle">{{ '积分中心' }}</view>
			</view>
		</view>
        <view class="bgimg">
            <view class="rulebox" @click="isscore = true">规则</view>
            <view class="scorebox" @click="nav_to('/pages/user/user_score')">
                <image class="GoldCoinimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718777797209670.png"></image>
                <view class="userscore">{{userNums.Score?userNums.Score:'0'}}</view>
                <image class="rArrow" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718777830355456.png"></image>
            </view>
            <view class="midbox">
                <!-- <view class="midbtn" @click="nav_to('/pages/court/score_Redeem')">
                    <view class="midtitle">提现</view>
                    <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17187788913361338.png" class="midimg"></image>
                </view> -->
                <view class="midbtn" @click="nav_to('/pages/court/score_Redeem')">
                    <view class="midtitle">兑换</view>
                    <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17187788913361338.png" class="midimg"></image>
                </view>
            </view>

            <view class="Checkinbox">
                <view class="topbox">
                    <view class="toptitle">
                        <view class="text_1">每日签到</view>
                        <image @click="isRule = true" class="topimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718780123547201.png"></image>
                    </view>
                    <view class="topright">
                        <view class="text_2">已签</view>
                        <view class="text_3">{{checkDay}}</view>
                        <view class="text_2">/7</view>
                    </view>
                </view>
                <view class="scrollXbox">
                    <scroll-view scroll-x="true" style="height: 180rpx;" :scroll-left="scrollletf">
                        <view class="Xscorebox">
                            <view class="Integral" v-for="(item,index) in 7" :key="index">
                                <block v-if="checkDay > index">
                                    <image class="goldimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17191949684111008.png"></image>
                                </block>
                                <block v-else>
                                    <image class="goldimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718937289078918.png"></image>
                                    <view class="sum">{{'+'+((item+1)*10)}}</view>
                                </block>
                                
                            </view>
                        </view>
                        <view class="daybox">
                            <view class="daylist" v-for="(item,index) in list1" :key="index">
                                <view class="Linebox">
                                    <block v-if="checkDay > index">
                                        <view class="Point pbg1" ></view>
                                        <view v-if="checkDay != (index+1)" class="line lbg1"></view>
                                        <view v-else class="line lbg2"></view>
                                    </block>
                                    <block v-else>
                                        <view class="Point pbg2" ></view>
                                        <view class="line lbg2"></view>
                                    </block>
                                    
                                </view>
                                <view v-if="checkDay > index" class="daytitle">{{'已签到'}}</view>
                                <view v-else class="daytitle">{{item.title}}</view>
                            </view>
                        </view>
                    </scroll-view>
                    
                </view>
                <view v-if="isTask == 0" class="chebtn" @click="NowCheck">立即签到</view>
                <view v-else class="chebtn2"> 明天再来 </view>
            </view>
        </view>

        <view class="taskbox">
            <view class="tasktitle">每日任务</view>
            <view class="taskcont" v-for="(item,index) in Tasklist" :key="index">
                <image class="icon" :src="item.ICON"></image>
                <view class="taskmid">
                    <view class="title_1">{{item.TaskName}}</view>
                    <view class="title_2" >
                        <image class="coin" :src="item.coin"></image>
                        <view class="text1">{{'+'+item.Score}}</view>
                    </view>
                    <!-- <view class="title_2" v-if="index == 1">
                        <image class="coin" :src="item.coin"></image>
                        <view class="text1">+100，</view>
                        <view class="text2">用户参与组局再</view>
                        <view class="text1">+200</view>
                    </view> -->
                </view>
                <view class="Release" @click="nav_to(item.GoURL)">去发布</view>
            </view>
        </view>

        <!-- 签到弹窗 -->
        <view class="Popupbox" v-if="isPopu">
            <view class="popuptitle">签到成功</view>
            <view class="poputmid">
                <view class="text_1">明日签到</view>
                <image class="popupcion" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718777797209670.png"></image>
                <view v-if="checkDay != 7" class="cionsum">{{'+'+((checkDay+1)*10)}}</view>
                <view v-else  class="cionsum">{{'+1'}}</view>
            </view>
        </view>
        <!-- 说明 -->
        <view class="showrule" v-if="isRule">
			<view class="Rulebox">
				<view class="ruletitle">签到说明</view>
				<view class="ruletitle_1">7天为一个周期，第1天可获得10积分，第2天可获得20积分，以此类推。需要连续签到7天，若断签，则重新计算</view>
				<view class="Close" @click=" isRule = false">知道了</view>
			</view>
		</view>
        <!-- 积分规则 -->
        <view class="showrule" v-if="isscore">
			<view class="Rulebox2">
				<view class="ruletitle_2">{{ruletitle}}</view>
				<view class="ruletitle_3">{{ruletext}}</view>
				<!-- <view class="ruletitle_3">2、每个新用户进入小程序之后，必须要上传至少一张本人运动相关照片</view> -->
				<!-- <view class="ruletitle_3">3、新用户照片通过审核后，通过消息栏的官方消息发送新用户邀请成功的信息，并且在积分详情页有显示</view> -->
				<view class="Close2" @click=" isscore = false">知道了</view>
			</view>
		</view>
    </view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
export default {
    components: {
		topStatus,
	},
data() {
return {
    isscore:false,
    checkDay:0, // 签到天数
    isTask:0, //是否签到
    isPopu:false,
    isRule:false,
    topNav: false,//吸顶
    userNums:{},
    list:[
        {
            id:2,
            icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718780986191154.png',
            coin:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718777797209670.png',
            url:'/pages/dynamic/dynamic_add',
        },
        {
            id:3,
            icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718781003098274.png',
            coin:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718777797209670.png',
            url:'/pages/ball/ball_add',
        }
    ],
    active: 1,
    list1:[
        {
            title:'第1天'
        },
        {
            title:'第2天'
        },
        {
            title:'第3天'
        },
        {
            title:'第4天'
        },
        {
            title:'第5天'
        },
        {
            title:'第6天'
        },
        {
            title:'第7天'
        },
        
    ],
    Tasklist:[],
    ruletext:'',
    ruletitle:'',
};
},
computed:{
    scrollletf(){
        if(this.checkDay > 2){
            return (this.checkDay-2) * 66
        }else{
            return 0 
        }
    }
},
onLoad(){
    this.GetContent()
},
onShow(){
    this.getSaleChannelDetail()
    this.getTask()
    // this.DaySign()
    this.IsDaySign()
    this.MyDaySign()
    // this.ContinuousSign()
},
onPageScroll: function (e) { //nvue暂不支持滚动监听，可用bindingx代替
	if (e.scrollTop > 210) {
		this.topNav = true
	} else {
		this.topNav = false
	}
},
methods: {
    //积分规则
    async GetContent(){
        let res = await this.$api.post('Content/GetContent',{
                ID:1
        })
        if(res.code == 0){
            this.ruletitle = res.data.Title
            this.ruletext = res.data.Content
        }
        // console.log(this.ruletext,'111');
    },
    //是否断签
    async ContinuousSign(){
        let res = await this.$api.post('Task/IsContinuousSign')
    },
    //任务列表
    async getTask(){
        let res = await this.$api.post('Task/List',{
            Frequency:"Day"
        })
         if(res.code == 0){
            this.Tasklist = res.data
            this.Tasklist.map((item)=>{
                item.coin  = 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718777797209670.png'
            })
            this.Tasklist = [...this.Tasklist]
            // console.log(this.Tasklist,'222');
            // res.data.map((item) => {
			// 	this.list.map((list, index) => {
			// 		if (item.ID == list.id) {
			// 			this.list[index] = {
			// 				...list,
			// 				...item
			// 			}
			// 		}
			// 	})
			// })
            // this.list = [...this.list]
        }
    },
    //每日签到
    async DaySign(){
        let res = await this.$api.post('Task/DaySign')
            if(res.data){
                this.isTask = 1
                this.MyDaySign()
                this.getSaleChannelDetail()
                this.isPopu = true
                setTimeout(()=>{
                    this.isPopu = false
                },3000)
            }
    },
    //今日是否签到
    async IsDaySign(){
        let res = await this.$api.post('Task/IsDaySign')
        if(res.data){
            this.isTask = 1
        }
    },
    async MyDaySign(){
        let res = await this.$api.post('Task/MyDaySign')
        if(res.code == 0){
            this.checkDay = res.data?.length || 0
        }
        
    },
    goBack(){
        uni.navigateBack();
    },
    async getSaleChannelDetail() {
		let res = await this.$api.post('/SaleChannel/SaleChannelDetail', {
			CompanyID: 6003
		});
		this.userNums = res.data;
	},
    NowCheck(){
        this.DaySign()
    }
},

}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}
.page_top {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	box-sizing: border-box;
	transition: 0.3s all;
}

.tabsBack {
	height: 44px;
	padding-left: 32rpx;
	display: flex;
	align-items: center;
	z-index: 999;

	.topTitle {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
        flex: 1;
        text-align: center;
	}

	.blackbox {
		// width: 52rpx;
		// height: 52rpx;
		// display: flex;
		// align-items: center;
        .backimg{
            width: 36rpx;
            height: 36rpx;
            vertical-align: middle;
        }
	}
}
.bgimg{
    background-image: url('https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1718776593916474.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 682rpx;
    position: relative;
    // overflow: hidden;
    padding-top: 260rpx;
    box-sizing: border-box;
    .rulebox{
        position: absolute;
        right: 0;
        top: 224rpx;
        width: 104rpx;
        height: 48rpx;
        text-align: center;
        line-height: 48rpx;
        color: #FF6957;
        font-size: 28rpx;
        background: rgba(255,255,255,0.8);
        border-radius: 200rpx 0rpx 0rpx 200rpx;
    }
    .scorebox{
        width: 300rpx;
        display: flex;
        align-items: center;
        margin-left: 24rpx;
        .GoldCoinimg{
            width: 64rpx;
            height: 64rpx;
            display: block;
        }
        .userscore{
            font-size: 72rpx;
            font-weight: bold;
            color: #553526;
        }
        .rArrow{
            width: 32rpx;
            height: 32rpx;
            margin-left: 8rpx;
        }
    }
    .midbox{
        display: flex;
        align-items: center;
        margin-left: 24rpx;
        margin-top: 42rpx;
        .midbtn{
            width: 152rpx;
            height: 60rpx;
            background: #FFFFFF;
            border-radius: 30rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 24rpx;
            .midtitle{
                font-size: 28rpx;
                color: #333333;
                margin-right: 8rpx;
            }
            .midimg{
                width: 8rpx;
                height: 24rpx;
            }
        }   
    }
    .Checkinbox{
        width: 702rpx;
        height: 428rpx;
        background: #FEFCFC;
        border-radius: 24rpx;
        padding: 32rpx;
        box-sizing: border-box;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
            bottom: -230rpx;
        .topbox{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24rpx;
            .toptitle{
                display: flex;
                align-items: center;
                .text_1{
                    color: #333333;
                    font-size: 36rpx;
                    font-weight: bold;
                    margin-right: 8rpx;
                }
                .topimg{
                    width: 32rpx;
                    height: 32rpx;
                }
            }
            .topright{
                display: flex;
                align-items: center;
                .text_2{
                    font-size: 28rpx;
                    color: #333333;
                    font-weight: bold;
                }
                .text_3{
                    font-size: 28rpx;
                    color: #F43439;
                    font-weight: bold;
                }
            }
        }
        .scrollXbox{
            width: 600rpx;
            height: 180rpx;
            .Xscorebox{
                width: 900rpx;
                display: flex;
                align-items: center;
                    margin-bottom: 28rpx;
                .Integral{
                    width: 72rpx;
                    height: 72rpx;
                    position: relative;
                    text-align: center;
                    line-height: 72rpx;
                    margin-right: 56rpx;
                    .goldimg{
                        width: 72rpx;
                        height: 72rpx;
                        position: absolute;
                        top: 0;
                        left: 0;
                        z-index: -1;
                    }
                    .sum{
                        font-size: 24rpx;
                        font-weight: bold;
                        color: #82482F;
                    }
                }
            }
            .daybox{
                width: 900rpx;
                display: flex;
                align-items: center;
                margin-left: 8rpx;
                .daylist{
                    width: 128rpx;
                    .pbg1{
                            background-color: #F43439;
                        }
                    .pbg2{
                         background-color: #FEE9E9;
                    }
                    .lbg1{
                            background: linear-gradient( 103deg, #F43137 0%, #FF6C70 100%);
                    }
                    .lbg2{
                            background-color: #FEE9E9;
                    }
                    .Linebox{
                        display: flex;
                        align-items: center;
                        transform: translateX(10px);
                        margin-bottom: 14rpx;
                        .Point{
                            width: 12rpx;
                            height: 12rpx;
                            border-radius: 50%;
                            // margin-left: 18rpx;
                        }
                        .line{
                            width: 120rpx;
                            height: 6rpx;
                            border-radius: 3rpx;
                        }
                    }
                    .daytitle{
                        font-size: 24rpx;
                        color: #333333;
                    }
                }
            }
        }
        .chebtn{
            width: 472rpx;
            height: 88rpx;
            background: linear-gradient( 94deg, #FC8A43 0%, #FC341B 100%);
            border-radius: 44rpx;
            text-align: center;
            line-height: 88rpx;
            color: #fff;
            font-size: 32rpx;
            font-weight: bold;
            margin: 0 auto;
            margin-top: 48rpx;
        }
        .chebtn2{
            width: 472rpx;
            height: 88rpx;
            background-color: #FFF4F3;
            border-radius: 44rpx;
            text-align: center;
            line-height: 88rpx;
            color: #FB452E;
            font-size: 32rpx;
            font-weight: bold;
            margin: 0 auto;
            margin-top: 42rpx;
        }
    }
}
.taskbox{
    width: 702rpx;
    padding: 32rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 24rpx;
    margin: 0 auto;
    margin-top: 254rpx;
    .tasktitle{
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 24rpx;
    }
    .taskcont{
        display: flex;
        align-items: center;
        margin-bottom: 48rpx;
        .icon{
            width: 88rpx;
            height: 88rpx;
        }
        .taskmid{
            margin-left: 24rpx;
            .title_1{
                font-size: 32rpx;
                font-weight: bold;
                color: #333333;
                margin-bottom: 8rpx;
            }
            .title_2{
                display: flex;
                align-items: center;
                .coin{
                    width: 32rpx;
                    height: 32rpx;
                }
                .text1{
                    font-size: 24rpx;
                    color: #F43439;
                }
                .text2{
                    color: #666666;
                    font-size: 24rpx;
                }
            }
        }
        .Release{
            width: 136rpx;
            height: 60rpx;
            background: linear-gradient( 94deg, #FE8129 0%, #FB432F 100%);
            border-radius: 31rpx;
            text-align: center;
            line-height: 60rpx;
            font-size: 24rpx;
            font-weight: bold;
            color: #fff;
            margin-left: auto;
        }
    }
}
.Popupbox{
    width: 252rpx;
    height: 140rpx;
    background: #373A43;
    border-radius: 24rpx;
    padding: 24rpx;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 999;
    .popuptitle{
        font-size: 32rpx;
        font-weight: bold;
        color: #fff;
        margin-bottom: 8rpx;
        text-align: center;
    }
    .poputmid{
        display: flex;
        align-items: center;
            justify-content: center;
        .text_1{
            font-size: 28rpx;
            color: #fff;
        }
        .popupcion{
            width: 32rpx;
            height: 32rpx;
        }
        .cionsum{
            font-size: 28rpx;
            color: #fff;
        }
    }
}
.showrule{
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
		}
        .Rulebox2{
            position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 600rpx;
			height: fit-content;
			background: linear-gradient( 180deg, #FEEDED 0%, #FFFFFF 100%);
			border-radius: 32rpx;
			border: 4rpx solid #FFFFFF;
			padding: 48rpx;
			box-sizing: border-box;
            .ruletitle_2{
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				text-align: center;
				margin-bottom: 32rpx;
			}
			.ruletitle_3{
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 16rpx;
                white-space: pre-wrap;
                max-height: 650rpx;
                overflow: auto;
			}
			.Close2{
				width: 510rpx;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				background: linear-gradient( 98deg, #FE6F5D 0%, #FE2851 100%);
				border-radius: 48rpx;
				margin-top: 32rpx;
			}
        }
		.Rulebox{
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 600rpx;
			height: 434rpx;
			background: linear-gradient( 180deg, #FEEDED 0%, #FFFFFF 100%);
			border-radius: 32rpx;
			border: 4rpx solid #FFFFFF;
			padding: 48rpx;
			box-sizing: border-box;


			.ruletitle{
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				text-align: center;
				margin-bottom: 32rpx;
			}
			.ruletitle_1{
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 16rpx;
			}
			.Close{
				width: 510rpx;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				background: linear-gradient( 94deg, #FC8A43 0%, #FC341B 100%);
				border-radius: 48rpx;
				margin-top: 32rpx;
			}
		}
</style>